import React, { Component, createRef } from 'react';

class Pinglun extends Component {

    //创建ref容器对象
    content = React.createRef();
    ul = createRef();


    //声明状态
    state = {
        arr:["学习react","明天自习了","周日要下雨","下周一还下雨","下雨恶心","下周放假"]
    }

    //方法
    pinglun = ()=>{
        //获取输入框的值
        let value = this.content.current.value;
       //更新数据
       this.setState({
            arr:[...this.state.arr,value]
       })
       //清空数据
       this.content.current.value = "";
    }


    //  componentDidUpdate
    componentDidUpdate(){
        // console.log(this);
        this.ul.current.scrollTop = this.ul.current.scrollHeight;
        // this.ul.current.style = "background:grey";
    }


    render() {
        return (
            <>
                <input ref={this.content} type="text"  /> 
                 <button onClick={this.pinglun}>评论</button>
                 <ul ref={this.ul} style={{width:300,height:200,border:'1px solid red',overflow:"auto"}}>
                        {
                            this.state.arr.map((item,index)=>{
                                return  <li key={index}>{item}</li>
                            })
                        }
                       
                 </ul>
            </>
        );
    }
}

export default Pinglun;